<template>
  <div class="box">
    <van-nav-bar title="个人中心" left-text="返回" left-arrow  @click-left="onClickLeft">
      <template #right>
        <van-icon name="setting-o" class="icon" @click="leap"/>
      </template>
    </van-nav-bar>
    <main>
      <div class = "person">
        <div class="circle">
          <img src="../assets/京东到家.png" alt="">
        </div>
        <div class="tishi" @click = "tiaozhuan" > {{msg}}</div>
      </div>
      <van-grid >
          <van-grid-item icon="refund-o" text="待付款" @click="goodslook(0)"/>
          <van-grid-item icon="shop-o" text="待收货" @click="goodslook(1)"/>
          <van-grid-item icon="thumb-circle-o" text="待评价" @click="goodslook(2)"/>
          <van-grid-item icon="label-o" text="全部订单" @click="goodslook(3)"/>
      </van-grid>
      <!-- 可使用如下跳转url="/vant/mobile.html" to="index"  -->
      <van-cell title="地址管理" is-link  url="/vant/mobile.html" to="/useraderss" />
      <van-cell title="我的收藏夹" is-link  to="/collect"/>
      <van-cell title="关于我们" is-link to="/aboutmy" />
      <img src="../assets/logo.png" alt="" class="img">
    </main>
    <!-- <FooterVue></FooterVue> -->
  </div>

</template>

<script>
import FooterVue from '@/components/Footer.vue';
import axios from '@/Utils/server';
export default {
   name : "My-vue",
   created(){
    axios.get("/api/user/info",{
      params:{userid:localStorage.getItem("userid")}
    })
    .then(res=>{
      if(res.data.code == 200){
        if(res.data.data[0].username){
          this.msg = "欢迎您:"+res.data.data[0].username
        }else{
          this.msg = "欢迎您:"+res.data.data[0].tel
        }
      }
    })
   },
   components:{
     FooterVue,
    //  CategoryHeadVue
   },
   data(){
    return {
      msg:"请点击登录"
    }
   },
   methods:{
    tiaozhuan(){
      if(localStorage.getItem("loginState")){
          this.$router.push("/")
      }else{
        this.$router.push("/reg")
      }
      
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    leap(){
  this.$router.push("/set")
  },
  goodslook(n){
    this.$router.push("/goodslook?active="+n)
  }
   }
}
</script>

<style scoped>
 .box{
  display: flex;
    flex-direction: column;
 }
 main{
  flex: 1;
 }
 .person{
  height: 5rem;
  background-color: pink;
  position: relative;
 }
 .circle{
  width: 4rem;
  height: 4rem;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 1rem;
 border-radius: 50%;
 background-color: green;

 }
 .circle img{
  width: 4rem;
  height: 4rem;

  border-radius: 50%;
 }
 .tishi{
  position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 6rem;
 border-radius: 50%;
 }
.img{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top:1rem;
}
.icon{
  font-size:1rem;
}

</style>